<!DOCTYPE html>
<html>

<head>
<title>Widget which can enter fullscreen mode</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../build/js/Cindy.js"></script>
<style type="text/css">
  #outer { width: 400px; height: 400px; }
  #CSCanvas { width: 100%; height: 100%; }
</style>
</head>

<body style="font-family:Arial; ">
  <div id="outer">
    <div id="CSCanvas"></div>
  </div>
  <button id="fs">Fullscreen</button>
  <script type="text/javascript">

var cdy = CindyJS({
  ports: [{
    id: "CSCanvas",
    transform: [{visibleRect:[-1,1,1,-1]}],
    background: "rgb(255,255,255)"
  }],
  scripts: "cs*",
  language: "en",
  geometry: [
    {name:"A", type:"Free", pos:[0,0]},
    {name:"B", type:"Free", pos:[0.7071,0.7071]},
    {name:"C", type:"CircleMP", args:["A","B"]}
  ]
});

var btn = document.getElementById("fs");
var div = document.getElementById("CSCanvas");
btn.onclick = function() {
  (div.requestFullscreen ||
   div.webkitRequestFullscreen ||
   div.mozRequestFullScreen ||
   div.msRequestFullscreen ||
   function(){}).call(div);
};
  </script>
</body>

</html>
